import { init } from 'snabbdom/build/package/init';
import { h } from 'snabbdom/build/package/h';

import { styleModule } from 'snabbdom/build/package/modules/style';
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners';

const patch = init([styleModule, eventListenersModule])

const data = [1, 2, 3, 4];
let oldVnode = null;

function view(data) {
  let arr = []
  data.forEach(item => {
    // 不设置key
    arr.push(h('li', [h('input', { attrs: { type: 'checkbox' } }), h('span', item)]));
  });
  let vnode = h('div', [
    h('button', {
      on: {
        click: function () {
          data.unshift(100);
          vnode.view(data)
          oldVnode = patch(oldVnode, vnode)
        }
      }
    }, 'hello world'),
    h('ul', arr)
  ])
  return vnode
}

let app = document.querySelector('#app')
oldVnode = patch(app, view(data))